<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交平台 - 标签筛选查询</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B7BDF;
      --primary-light: #E8EEFF;
      --secondary: #8C9EFF;
      --success: #4CAF50;
      --danger: #F44336;
      --warning: #FF9800;
      --light-bg: #F5F7FA;
      --card-bg: #FFFFFF;
      --text-primary: #333333;
      --text-secondary: #666666;
      --text-tertiary: #999999;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light-bg);
      color: var(--text-primary);
      padding-top: 56px;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--card-bg);
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      z-index: 1030;
    }
    
    .navbar-brand {
      color: var(--primary);
      font-weight: 600;
    }
    
    /* 搜索区域 */
    .search-container {
      padding: 12px 15px;
      background-color: var(--card-bg);
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #E0E0E0;
      background-color: #F9F9F9;
      font-size: 14px;
      outline: none;
    }
    
    .search-input:focus {
      border-color: var(--primary);
      background-color: white;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-tertiary);
    }
    
    /* 筛选工具栏 */
    .filter-toolbar {
      padding: 10px 15px;
      background-color: var(--card-bg);
      border-top: 1px solid #F0F0F0;
      border-bottom: 1px solid #F0F0F0;
      display: flex;
      overflow-x: auto;
      gap: 10px;
      white-space: nowrap;
    }
    
    .filter-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      border: none;
      background-color: var(--light-bg);
      color: var(--text-secondary);
      cursor: pointer;
      flex-shrink: 0;
    }
    
    .filter-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    .filter-btn i {
      margin-right: 5px;
    }
    
    /* 高级筛选面板 */
    .advanced-filter {
      background-color: var(--card-bg);
      padding: 15px;
      border-bottom: 1px solid #F0F0F0;
      display: none;
    }
    
    .advanced-filter.active {
      display: block;
    }
    
    .filter-section {
      margin-bottom: 15px;
    }
    
    .filter-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--text-primary);
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-option {
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      border: 1px solid #E0E0E0;
      color: var(--text-secondary);
      cursor: pointer;
    }
    
    .filter-option.selected {
      border-color: var(--primary);
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .filter-actions {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }
    
    .filter-actions button {
      flex: 1;
      padding: 8px 0;
      border-radius: 8px;
      font-size: 15px;
      border: none;
    }
    
    .reset-btn {
      background-color: #F5F5F5;
      color: var(--text-secondary);
    }
    
    .apply-btn {
      background-color: var(--primary);
      color: white;
    }
    
    /* 标签容器 */
    .tags-container {
      padding: 15px;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .section-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--text-primary);
    }
    
    .section-action {
      font-size: 13px;
      color: var(--primary);
    }
    
    /* 标签样式 */
    .tag-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 25px;
    }
    
    .tag-item {
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .tag-item:hover {
      transform: translateY(-2px);
    }
    
    .tag-item i {
      margin-right: 6px;
      font-size: 12px;
    }
    
    .tag-item .count {
      margin-left: 6px;
      font-size: 12px;
      opacity: 0.8;
    }
    
    /* 不同类型标签样式 */
    .tag-category {
      background-color: #F0F7FF;
      color: #1890FF;
      border: 1px solid #E6F7FF;
    }
    
    .tag-trending {
      background-color: #FFF7E6;
      color: #FA8C16;
      border: 1px solid #FFF1D6;
    }
    
    .tag-trending.hot::after {
      content: "HOT";
      margin-left: 5px;
      background-color: var(--danger);
      color: white;
      font-size: 10px;
      padding: 1px 4px;
      border-radius: 3px;
    }
    
    .tag-interest {
      background-color: #F6FFED;
      color: #52C41A;
      border: 1px solid #EAffD0;
    }
    
    .tag-followed {
      background-color: #FFF0F0;
      color: #F5222D;
      border: 1px solid #FFE3E3;
    }
    
    /* 已选标签 */
    .selected-tags {
      background-color: var(--card-bg);
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .selected-tag {
      background-color: var(--primary-light);
      color: var(--primary);
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      margin-right: 8px;
      margin-bottom: 8px;
    }
    
    .selected-tag i {
      margin-left: 6px;
      cursor: pointer;
      font-size: 12px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--card-bg);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      box-shadow: 0 -1px 4px rgba(0,0,0,0.08);
      z-index: 1020;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-tertiary);
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item i {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    /* 动画效果 */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }
    
    .tag-item.selected {
      animation: pulse 0.3s ease;
    }
    
    /* 搜索结果为空状态 */
    .empty-state {
      display: none;
      text-align: center;
      padding: 40px 20px;
      color: var(--text-tertiary);
    }
    
    .empty-state.active {
      display: block;
    }
    
    .empty-state i {
      font-size: 48px;
      margin-bottom: 15px;
      opacity: 0.3;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-light fixed-top">
    <div class="container px-3">
      <a class="navbar-brand" href="#">
        <i class="fa fa-tags me-1"></i>标签探索
      </a>
      <button class="navbar-toggler" type="button">
        <i class="fa fa-sliders"></i>
      </button>
    </div>
  </nav>
  
  <!-- 搜索区域 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索标签、话题或内容...">
    </div>
  </div>
  
  <!-- 筛选工具栏 -->
  <div class="filter-toolbar">
    <button class="filter-btn active" data-filter="all">
      <i class="fa fa-th-large"></i>全部
    </button>
    <button class="filter-btn" data-filter="category">
      <i class="fa fa-folder-o"></i>分类
    </button>
    <button class="filter-btn" data-filter="trending">
      <i class="fa fa-fire"></i>热门
    </button>
    <button class="filter-btn" data-filter="interest">
      <i class="fa fa-heart-o"></i>兴趣
    </button>
    <button class="filter-btn" data-filter="followed">
      <i class="fa fa-star-o"></i>已关注
    </button>
    <button class="filter-btn" id="advancedFilterBtn">
      <i class="fa fa-filter"></i>高级
    </button>
  </div>
  
  <!-- 高级筛选面板 -->
  <div class="advanced-filter" id="advancedFilterPanel">
    <div class="filter-section">
      <div class="filter-title">内容类型</div>
      <div class="filter-options">
        <div class="filter-option selected">全部内容</div>
        <div class="filter-option">文章</div>
        <div class="filter-option">图片</div>
        <div class="filter-option">视频</div>
        <div class="filter-option">动态</div>
      </div>
    </div>
    
    <div class="filter-section">
      <div class="filter-title">热度范围</div>
      <div class="filter-options">
        <div class="filter-option selected">全部热度</div>
        <div class="filter-option">热门 (10k+)</div>
        <div class="filter-option">中等 (1k-10k)</div>
        <div class="filter-option">新晋 (<1k)</div>
      </div>
    </div>
    
    <div class="filter-section">
      <div class="filter-title">时间范围</div>
      <div class="filter-options">
        <div class="filter-option selected">不限时间</div>
        <div class="filter-option">今日</div>
        <div class="filter-option">本周</div>
        <div class="filter-option">本月</div>
        <div class="filter-option">全年</div>
      </div>
    </div>
    
    <div class="filter-actions">
      <button class="reset-btn">重置</button>
      <button class="apply-btn">应用筛选</button>
    </div>
  </div>
  
  <!-- 已选标签 -->
  <div class="tags-container">
    <div class="selected-tags">
      <div class="section-title" style="margin-bottom: 10px;">已选标签</div>
      <div id="selectedTagsContainer">
        <!-- 已选标签将动态添加到这里 -->
        <div class="selected-tag">
          #旅行摄影 <i class="fa fa-times"></i>
        </div>
        <div class="selected-tag">
          #美食探店 <i class="fa fa-times"></i>
        </div>
      </div>
    </div>
    
    <!-- 分类标签 -->
    <div class="tag-section" data-type="category">
      <div class="section-header">
        <h3 class="section-title">内容分类标签</h3>
        <span class="section-action">更多</span>
      </div>
      <div class="tag-grid">
        <div class="tag-item tag-category">
          <i class="fa fa-file-text-o"></i>科技
          <span class="count">12.5k</span>
        </div>
        <div class="tag-item tag-category">
          <i class="fa fa-picture-o"></i>艺术
          <span class="count">8.3k</span>
        </div>
        <div class="tag-item tag-category">
          <i class="fa fa-music"></i>音乐
          <span class="count">7.6k</span>
        </div>
        <div class="tag-item tag-category">
          <i class="fa fa-futbol-o"></i>体育
          <span class="count">6.9k</span>
        </div>
        <div class="tag-item tag-category">
          <i class="fa fa-cutlery"></i>美食
          <span class="count">15.2k</span>
        </div>
        <div class="tag-item tag-category">
          <i class="fa fa-plane"></i>旅行
          <span class="count">10.8k</span>
        </div>
        <div class="tag-item tag-category">
          <i class="fa fa-briefcase"></i>职场
          <span class="count">5.4k</span>
        </div>
        <div class="tag-item tag-category">
          <i class="fa fa-graduation-cap"></i>教育
          <span class="count">4.7k</span>
        </div>
      </div>
    </div>
    
    <!-- 热门标签 -->
    <div class="tag-section" data-type="trending">
      <div class="section-header">
        <h3 class="section-title">热门话题标签</h3>
        <span class="section-action">换一批</span>
      </div>
      <div class="tag-grid">
        <div class="tag-item tag-trending hot">
          #露营生活
          <span class="count">24.5k</span>
        </div>
        <div class="tag-item tag-trending hot">
          #城市探店
          <span class="count">18.7k</span>
        </div>
        <div class="tag-item tag-trending">
          #居家健身
          <span class="count">15.3k</span>
        </div>
        <div class="tag-item tag-trending">
          #数码新品
          <span class="count">12.8k</span>
        </div>
        <div class="tag-item tag-trending">
          #职场技能
          <span class="count">9.6k</span>
        </div>
        <div class="tag-item tag-trending">
          #电影评论
          <span class="count">8.4k</span>
        </div>
        <div class="tag-item tag-trending">
          #读书感悟
          <span class="count">7.2k</span>
        </div>
        <div class="tag-item tag-trending">
          #宠物日常
          <span class="count">6.5k</span>
        </div>
      </div>
    </div>
    
    <!-- 兴趣标签 -->
    <div class="tag-section" data-type="interest">
      <div class="section-header">
        <h3 class="section-title">为你推荐</h3>
        <span class="section-action">刷新</span>
      </div>
      <div class="tag-grid">
        <div class="tag-item tag-interest">
          <i class="fa fa-coffee"></i>手冲咖啡
        </div>
        <div class="tag-item tag-interest">
          <i class="fa fa-camera"></i>胶片摄影
        </div>
        <div class="tag-item tag-interest">
          <i class="fa fa-code"></i>前端开发
        </div>
        <div class="tag-item tag-interest">
          <i class="fa fa-gamepad"></i>独立游戏
        </div>
        <div class="tag-item tag-interest">
          <i class="fa fa-paint-brush"></i>插画创作
        </div>
        <div class="tag-item tag-interest">
          <i class="fa fa-book"></i>科幻小说
        </div>
        <div class="tag-item tag-interest">
          <i class="fa fa-headphones"></i>黑胶唱片
        </div>
        <div class="tag-item tag-interest">
          <i class="fa fa-leaf"></i>绿植养护
        </div>
      </div>
    </div>
    
    <!-- 已关注标签 -->
    <div class="tag-section" data-type="followed">
      <div class="section-header">
        <h3 class="section-title">已关注标签</h3>
        <span class="section-action">管理</span>
      </div>
      <div class="tag-grid">
        <div class="tag-item tag-followed">
          <i class="fa fa-star"></i>旅行摄影
        </div>
        <div class="tag-item tag-followed">
          <i class="fa fa-star"></i>美食探店
        </div>
        <div class="tag-item tag-followed">
          <i class="fa fa-star"></i>电影推荐
        </div>
        <div class="tag-item tag-followed">
          <i class="fa fa-star"></i>健身打卡
        </div>
      </div>
    </div>
  </div>
  
  <!-- 空状态 -->
  <div class="empty-state">
    <i class="fa fa-search"></i>
    <h3>未找到相关标签</h3>
    <p>尝试使用其他关键词搜索</p>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <div class="nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </div>
    <div class="nav-item">
      <i class="fa fa-compass"></i>
      <span>发现</span>
    </div>
    <div class="nav-item active">
      <i class="fa fa-tags"></i>
      <span>标签</span>
    </div>
    <div class="nav-item">
      <i class="fa fa-user-o"></i>
      <span>我的</span>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选按钮切换
    const filterBtns = document.querySelectorAll('.filter-btn');
    const tagSections = document.querySelectorAll('.tag-section');
    
    filterBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有按钮的active类
        filterBtns.forEach(b => b.classList.remove('active'));
        // 给当前按钮添加active类
        this.classList.add('active');
        
        const filterType = this.getAttribute('data-filter');
        
        // 高级筛选按钮特殊处理
        if (filterType === 'advanced') return;
        
        // 根据筛选类型显示/隐藏对应标签区域
        tagSections.forEach(section => {
          if (filterType === 'all') {
            section.style.display = 'block';
          } else {
            section.style.display = section.getAttribute('data-type') === filterType ? 'block' : 'none';
          }
        });
      });
    });
    
    // 高级筛选面板切换
    const advancedFilterBtn = document.getElementById('advancedFilterBtn');
    const advancedFilterPanel = document.getElementById('advancedFilterPanel');
    
    advancedFilterBtn.addEventListener('click', function() {
      advancedFilterPanel.classList.toggle('active');
    });
    
    // 高级筛选选项选择
    const filterOptions = document.querySelectorAll('.filter-option');
    filterOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 在同一组中只能选择一个选项
        const parent = this.parentElement;
        parent.querySelectorAll('.filter-option').forEach(opt => {
          opt.classList.remove('selected');
        });
        this.classList.add('selected');
      });
    });
    
    // 应用筛选
    document.querySelector('.apply-btn').addEventListener('click', function() {
      advancedFilterPanel.classList.remove('active');
      alert('筛选已应用');
    });
    
    // 重置筛选
    document.querySelector('.reset-btn').addEventListener('click', function() {
      filterOptions.forEach(option => {
        option.classList.remove('selected');
      });
      // 选中每个筛选组的第一个选项
      document.querySelectorAll('.filter-options').forEach(group => {
        group.querySelector('.filter-option').classList.add('selected');
      });
    });
    
    // 标签选择功能
    const tagItems = document.querySelectorAll('.tag-item');
    const selectedTagsContainer = document.getElementById('selectedTagsContainer');
    
    tagItems.forEach(tag => {
      tag.addEventListener('click', function() {
        this.classList.toggle('selected');
        
        // 获取标签文本
        let tagText = this.textContent.trim();
        // 移除计数部分
        if (tagText.includes('k')) {
          tagText = tagText.split(' ')[0];
        }
        // 如果没有#，添加#
        if (!tagText.startsWith('#')) {
          tagText = '#' + tagText;
        }
        
        // 如果选中，添加到已选标签
        if (this.classList.contains('selected')) {
          // 检查是否已存在
          const existingTags = selectedTagsContainer.querySelectorAll('.selected-tag');
          let tagExists = false;
          
          existingTags.forEach(existingTag => {
            if (existingTag.textContent.trim().includes(tagText)) {
              tagExists = true;
            }
          });
          
          if (!tagExists) {
            const selectedTag = document.createElement('div');
            selectedTag.className = 'selected-tag';
            selectedTag.innerHTML = `${tagText} <i class="fa fa-times"></i>`;
            
            // 添加删除功能
            selectedTag.querySelector('i').addEventListener('click', function(e) {
              e.stopPropagation();
              selectedTag.remove();
              
              // 同时取消标签的选中状态
              tagItems.forEach(t => {
                let tText = t.textContent.trim().split(' ')[0];
                if (!tText.startsWith('#')) tText = '#' + tText;
                if (tText === tagText) {
                  t.classList.remove('selected');
                }
              });
            });
            
            selectedTagsContainer.appendChild(selectedTag);
          }
        } else {
          // 如果取消选中，从已选标签中移除
          const existingTags = selectedTagsContainer.querySelectorAll('.selected-tag');
          existingTags.forEach(existingTag => {
            if (existingTag.textContent.trim().includes(tagText)) {
              existingTag.remove();
            }
          });
        }
      });
    });
    
    // 搜索功能
    const searchInput = document.querySelector('.search-input');
    const emptyState = document.querySelector('.empty-state');
    
    searchInput.addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase().trim();
      
      if (searchTerm === '') {
        // 搜索为空时显示所有标签
        tagItems.forEach(tag => tag.style.display = 'inline-flex');
        tagSections.forEach(section => section.style.display = 'block');
        emptyState.classList.remove('active');
        return;
      }
      
      let hasResults = false;
      
      // 筛选标签
      tagItems.forEach(tag => {
        const tagText = tag.textContent.toLowerCase().trim();
        const matchesSearch = tagText.includes(searchTerm);
        
        tag.style.display = matchesSearch ? 'inline-flex' : 'none';
        
        if (matchesSearch) {
          hasResults = true;
        }
      });
      
      // 控制空状态显示
      emptyState.classList.toggle('active', !hasResults);
      
      // 显示所有标签区域，但只有匹配的标签可见
      tagSections.forEach(section => section.style.display = 'block');
    });
    
    // 换一批热门标签
    document.querySelector('.tag-section[data-type="trending"] .section-action').addEventListener('click', function() {
      const newTrendingTags = [
        '#户外徒步', '#美食教程', '#摄影技巧', '#穿搭分享',
        '#家居设计', '#游戏攻略', '#旅行vlog', '#职场经验'
      ];
      const counts = [19.2, 17.5, 14.8, 13.6, 11.2, 9.8, 8.7, 7.5];
      
      const tagGrid = document.querySelector('.tag-section[data-type="trending"] .tag-grid');
      tagGrid.innerHTML = '';
      
      newTrendingTags.forEach((tag, index) => {
        const isHot = index < 2;
        const tagItem = document.createElement('div');
        tagItem.className = `tag-item tag-trending ${isHot ? 'hot' : ''}`;
        tagItem.innerHTML = `${tag} <span class="count">${counts[index]}k</span>`;
        
        // 添加点击事件
        tagItem.addEventListener('click', function() {
          this.classList.toggle('selected');
          // 这里可以复用之前的标签选择逻辑
        });
        
        tagGrid.appendChild(tagItem);
      });
    });
    
    // 刷新兴趣标签
    document.querySelector('.tag-section[data-type="interest"] .section-action').addEventListener('click', function() {
      const newInterestTags = [
        {icon: 'fa-paw', text: '宠物训练'},
        {icon: 'fa-bicycle', text: '骑行路线'},
        {icon: 'fa-birthday-cake', text: '烘焙技巧'},
        {icon: 'fa-language', text: '外语学习'},
        {icon: 'fa-plane', text: '小众旅行'},
        {icon: 'fa-microphone', text: '播客制作'},
        {icon: 'fa-film', text: '独立电影'},
        {icon: 'fa-television', text: '剧集推荐'}
      ];
      
      const tagGrid = document.querySelector('.tag-section[data-type="interest"] .tag-grid');
      tagGrid.innerHTML = '';
      
      newInterestTags.forEach(tag => {
        const tagItem = document.createElement('div');
        tagItem.className = 'tag-item tag-interest';
        tagItem.innerHTML = `<i class="fa ${tag.icon}"></i>${tag.text}`;
        
        // 添加点击事件
        tagItem.addEventListener('click', function() {
          this.classList.toggle('selected');
          // 这里可以复用之前的标签选择逻辑
        });
        
        tagGrid.appendChild(tagItem);
      });
    });
  </script>
</body>
</html>